<template>
  <drawerDetail v-model="dialogVisible" title="详情页" :tabs="ruleForm.tabs">
    <template #detailSynopsis>
      <span class="gray">创建时间 </span
      ><span class="mx15">2021-11-10 15:49</span>
      <span class="gray">最近更新时间 </span
      ><span class="mx15">2021-11-10 15:49</span>
    </template>
    <template #operationBotton>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button>中文</el-button>
    </template>
    <template #operationContent="{ type }">
      
      <detail :data="baseinfo" v-if="type.editableTabsValue==1" />
    </template>
  </drawerDetail>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted, watch } from "vue";
import drawerDetail from "/@/components/drawer/drawer.vue";
import detail from './detail.vue';
const emit = defineEmits(["update:modelValue"]);
const dialogVisible = ref(false);
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    defalut: false,
  },
  title: {
    type: String,
    defalut: "",
  },
  tabs: {
    type: Object,
    default: [],
  },
});
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
  },
  {
    immediate: true,
  }
);

watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      handleClose();
    }
  }
);
const handleClose = () => {
  emit("update:modelValue", false);
};
const baseinfo = ref({
createdBy:"超级管理员",
createdTime:"2024-01-01",
image:"https://configservercdn-adm.cqttech.com/d/7/4/d7c49bbb99f1672b77ff289de8953df1.png",
updatedBy:"超级管理员",
updatedTime:"2024-01-01",
remark:"",
name:"济帆",
typeLabel:"",
nums:"112",
price:"11",
rules:"",
computeMode:"",

})

const ruleForm = reactive({
  tabs: [
    {
      name: "基本信息",
      type: "1",
    },
    {
      name: "联系人",
      type: "2",
    },
    {
      name: "项目",
      type: "3",
    },
    {
      name: "合同",
      type: "4",
    },
  ],
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const state = reactive({});

</script>

<style scoped lang="scss"></style>
